<template>
	<view class="mine-page-container">
		<view class="page-image">
			<u-avatar size="150" :src='userInfo.headImage' @click="uploadHeadImage"></u-avatar>
		</view>
		<view class="page-user-title">
			<view class="page-user-text">
				<u-text bold :size="20" :text="userInfo.username"></u-text>
			</view>
		</view>
		<u-line/>
		<view class="page-menu-list u-page">
			<u-list>
				<u-list-item>
					<u-cell 
						@click="userLogout" 
						title="退出登录"  
						arrow-direction="right" 
						:isLink="true" 
						icon="/static/svg/quit.svg"
						rightIcon="arrow-right">
					</u-cell>
				</u-list-item>
			</u-list>
		</view>
		
		<u-popup  :show="headImagePopup" mode="bottom" :overlayOpacity="0.2">
			<view class="head-image-photo head-image-button">
				<u-button text="相册" icon="/static/svg/photo.svg" @click="startUploadHeadImage('album')"/>
			</view>
			<view class="head-image-camera head-image-button">
				<u-button text="照相机" icon="/static/svg/camera.svg" @click="startUploadHeadImage('camera')"/>
			</view>
			<view class="head-image-cancel head-image-button">
				<u-button style="color: black" text="取消" @click="cancelUploadHead"/>
			</view>
		</u-popup>
		
		<!-- 动态加载遮罩层 -->
		<loadingOverlay :show="loading" :loading-text="loadingText"/>
	</view>
</template>

<script>
	import $storage from '@/utils/storage.js'
	import loadingOverlay from '@/components/loading-overlay/index.vue'
	
	import uploadFile from '@/static/js/uploadFile.js'
	import { logout, updateInfo, userInfo } from '@/api/user.js'
	
	export default {
		name: 'MainMine',
		components: {
			loadingOverlay
		},
		data() {
			return {
				userInfo: null,
				// 上传头像弹窗
				headImagePopup: false,
				loading: false,
				loadingText: null
			}
		},
		created() {
			this.userInfo = $storage.getUserStorage()
		},
		methods: {
			// 退出登录
			async userLogout() {
				uni.showModal({
					title: "确定退出当前账号吗?",
					success:async (res)=> {
						if(res.confirm){
							const res = await logout()
							if(res.code === 200){
								$storage.removeTokenStorage()
								$storage.removeUserStorage()
								uni.navigateTo({
									url: "/pages/login/index"
								})
							}
						}
					}
				})
			},
			
			// 点击头像更新头像
			async uploadHeadImage() {
				this.headImagePopup = true
			},
			
			// 上传头像
			async startUploadHeadImage(sourceType) {
				if(!sourceType) return;
				
				const res = await uploadFile.uploadSingleImage(sourceType)
				if(!res || Number(res.code) !== 200 || !res.data.url){
					uni.$u.toast('头像上传失败')
					this.loading = false
					return;
				}
				this.loadingText = '上传中...'
				this.loading = true
				const fileStoragePath = res.data.url
				const editUser = await updateInfo({id: this.userInfo.id, headImage: fileStoragePath})
				if(!editUser || editUser.code !== 200){
					uni.$u.toast('头像上传失败')
					this.loading = false
					return;
				}
				
				// 刷新用户信息
				await this.resetUserInfo()
				uni.$u.toast('头像上传成功')
				// 关闭上传文件
				this.cancelUploadHead()
				this.loading = false
			},
			
			// 取消更换头像
			cancelUploadHead() {
				this.headImagePopup = false
			},
			
			// 重置用户信息
			async resetUserInfo() {
				const user = await userInfo()
				$storage.setUserStorage(user.data)
				this.userInfo = $storage.getUserStorage()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine-page-container {
		overflow: hidden;
		
		.page-image {
			margin-top: 20px;
			height: 200px;
			display: flex;
			justify-content: center;
		}
		
		.page-menu-list {
			height: calc(100vh - 363px);
			overflow: hidden;
		}
		
		.head-image-button {
			width: 80%;
			margin: 5px auto;
		}
		
		.page-user-title {
			height: 30px;
			width: 100%;
			display: flex;
			justify-content: center !important;
		}
	}
</style>
